<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
      p{
        text-align: center;
      }
      span{
        color: red;
      }
    </style>
</head>
<body>

    <p>
      <span id="time">5</span>秒之后，自动跳转到首页...
    </p>

<script>
  /**
   * 分析：
   *    1.显示页面效果 <p>
   *    2.倒计时读秒效果实现
   *      2.1 定义一个方法，获取 span 标签，修改 span 标签体内容，时间--
   *      2.2 定义一个定时器，1秒执行一次该方法
   *      2.3 在方法中判断时间，如果<=0，则跳转到首页
   */

    //2.倒计时读秒效果实现
    var second = 5;
    var time = document.getElementById("time");
    function showTime() {
        second--;
        if (second==0) {
          clearInterval(id);
          //跳转到首页
          location.href = "http://www.baidu.com"
        }
        time.innerHTML = second + "";
    }

    //设置定时器，1秒执行一次该方法
    var id = setInterval(showTime,1000);


</script>



</body>
</html>